<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content"><text class="text-black text-bold">打卡详情</text></block>
		</cu-custom>
		<view v-if="attendanceDetail!=null" class="sign-title bg-white margin-top">
			<view class="sign-title-l">
				<image class="portrait" mode="aspectFill"
				 :src="$constant.IMG_VERSION == $constant.OSS?attendanceDetail.facewhitelist.personphoto:$constant.BASEURL+attendanceDetail.facewhitelist.personphoto" />
				<view class="text">
					<view class="name">
						{{attendanceDetail.facewhitelist.personname}}
					</view>
					<view @click="goRule" class="gz">
						<text class="t1">考勤组:{{attendanceDetail.facewhitelist.attshits.sname}}</text>
						<text>查看规则</text>
					</view>
				</view>
			</view>
			<view class="sign-title-r">
				<view class="date">
					<picker :end="endDate" mode="date" :value="date" @change="bindDateChange">
						<view class="uni-input">{{date}}
							<text class="cuIcon-unfold" style="padding-left: 4upx;"></text>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view v-if="!noData">
			<view v-if="attendanceDetail!=null" class="bg-white margin-top">
				<view v-for="item in attendanceDetail.leavess" class="leave-item">
					<view class="leave-title">
						<text class="cuIcon-title text-orange "></text>
						{{item.vname}}
						<text class="cuIcon-right" style="padding-left: 8upx;"></text>
					</view>
					<view class="leave-content">
						{{DateFormat(item.leavestime.time,item.vminimum,item.lstime)}}
						~
						{{DateFormat(item.leaveetime.time,item.vminimum,item.letime)}}
						{{item.leavehour}}{{item.vminimum == 3?'小时':'天'}}
					</view>
				</view>
			</view>
			<view class="bg-white">
				<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
			</view>
		</view>
		<no-more :show="noData" text="今天没有考勤数据哦"></no-more>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue';
	import {
		formateDate,
		getFormatTime,
		DateFormat
	} from "@/common/utils.js"

	let curDate = new Date() //获取当前日期
	function getNowDate() {
		let time = formateDate(curDate, 'Y-M-D')
		return time;
	}
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				attendanceDetail: null,
				active: -1,
				list2: [],
				date: getNowDate(),
				startDate: getNowDate(),
				endDate: getNowDate(),
				noData: false
			}
		},
		onLoad(options) {
			if (typeof(options.id) != 'undefined') {
				this.id = options.id
				console.log(options.id)
				this.date = options.date
				this.getData()
			}
			// else{
			// 	this.id = 'OGyQTMdpURljVVZYLnZ'
			// 	// this.date = ''
			// 	this.getData()
			// }
		},
		methods: {
			// 产看规则
			goRule(facewhitelist) {
				uni.navigateTo({
					url: 'rule'
				})
			},
			DateFormat(timestamp, vminimum, stime) {
				return DateFormat(timestamp, vminimum, stime)
			},
			// 选择打卡日期
			bindDateChange: function(e) {
				let time = e.target.value
				var selDate = new Date(Date.parse(time.replace(/-/g, "/")));
				if (selDate > curDate) {
					uni.showToast({
						title: '日期不能超过今天',
						icon: 'none'
					})
				}
				//如果选择当前日期，不做操作
				else if (time != this.date) {
					this.date = time
					this.getData()
				}
			},
			getData(time) {
				this.list2 = []
				uni.showLoading({
					title: '加载中'
				})
				console.log('createDate =', this.date)
				console.log('id =', this.id)
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_ATTENDANCE_RECORD,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						perid: this.id,
						page: 1,
						rows: 1,
						attdate_begin: this.date,
						attdate_end: this.date
					},
					success: (res) => {
						console.log('22222222222222', res.data)
						if (res.data.code == 0) {
							if (typeof(res.data.data) == 'undefined') {
								// this.attendanceDetail = null
								this.noData = true
								return
							}
							this.noData = false
							let data = res.data.data.results.shift()
							// console.log('22222222222222',data)
							this.attendanceDetail = data
							let timeintervalcount = data.shifsset.timeintervalcount
							//获取打卡时间
							let timeinterval1 = data.timeinterval1
							// this.active = timeinterval1
							for (let i = 1; i <= timeintervalcount; i++) {
								if (i == 1) {
									this.list2.push({
										title: `${data.stime == null ? '未打卡' :'打卡时间 '+ getFormatTime(data.stime.time)}`,
										desc: '上班时间 ' + data.shifsset.stime,
									})
									this.list2.push({
										title: `${data.etime == null ? '未打卡' :'打卡时间 '+ getFormatTime(data.etime.time)}`,
										desc: '下班时间 ' + data.shifsset.etime
									})
									if (data.stime != null) {
										this.active = 0
									}
									if (data.etime != null) {
										this.active = 1
									}
								}

								if (i == 2) {
									this.list2.push({
										title: `${data.stime2 == null ? '未打卡' :'打卡时间 '+ getFormatTime(data.stime2.time)}`,
										desc: '上班时间 ' + data.shifsset.stime2
									})
									this.list2.push({
										title: `${data.etime2 == null ? '未打卡' :'打卡时间 '+ getFormatTime(data.etime2.time)}`,
										desc: '下班时间 ' + data.shifsset.etime2
									})
									if (data.stime2 != null) {
										this.active = 2
									}
									if (data.etime2 != null) {
										this.active = 3
									}
								}

								if (i == 3) {
									this.list2.push({
										title: `${data.stime3 == null ? '未打卡' :'打卡时间 '+ getFormatTime(data.stime3.time)}`,
										desc: '上班时间 ' + data.shifsset.stime3
									})
									this.list2.push({
										title: `${data.etime3 == null ? '未打卡' :'打卡时间 '+ getFormatTime(data.etime3.time)}`,
										desc: '下班时间 ' + data.shifsset.etime3,
									})
									if (data.stime3 != null) {
										this.active = 4
									}
									if (data.etime3 != null) {
										this.active = 5
									}
								}
							}
						} else {
							uni.showModal({
								content: res.data.message,
								showCancel: false
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>

<style>
	.leave-item {
		padding: 20upx 15upx;
	}

	.leave-item .leave-title {
		font-weight: bold;
		font-size: 30upx;
	}

	.leave-item .leave-content {
		padding: 4upx 30upx;
		font-size: 26upx;
	}

	.sign-title {
		display: flex;
		justify-content: space-between;
		padding: 30upx 24upx;
		border-bottom: 1upx solid #f1f1f1;
		/* align-items: center; */
	}

	.sign-title .portrait {
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
		border-radius: 50%;
		background-color: #007AFF;
		color: #fff;
		font-size: 28upx;
		text-align: center;
	}

	.sign-title .sign-title-l {
		display: flex;
		/* align-items: center; */
	}

	.sign-title .sign-title-l .text {
		margin-left: 20upx;
	}

	.sign-title .sign-title-l .text .name {
		font-size: 32upx;
	}

	.sign-title .sign-title-l .text .gz {
		color: darkblue;
		display: inline-flex;
	}

	.sign-title .sign-title-l .text .gz text {
		display: inline-block;
	}

	.sign-title .sign-title-l .text .gz .t1 {
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		white-space: nowrap;
		/*规定段落中的文本不进行换行 */
		width: 150upx;
		/*需要配合宽度来使用*/
	}
</style>
